<template>
  <div>
    <zione />
    <h1>正向传值</h1>
    <h2>我是父页面</h2>
    <zi :text="this.arr" />
    <hr />
    <h1>ref使用</h1>
    <zi ref="com" />
    <button @click="fun2()">点我获取子组件数据</button>
    <hr />
    <h1>$emit使用</h1>
    <zi @zipao="fun" />
    <hr />
    <h1>v-modle使用</h1>
    <input v-model="num" type="text" />{{ num }}
    <h1>lazy修饰符</h1>
    <input v-model.lazy="num" type="text" />{{ num }}
    <h1>lazy和number修饰符</h1>
    <input v-model.lazy.number="newnum" type="text" />{{ newnum }} <br />
    <button @click="fun1()">点我查看数据类型</button>
    <h1>trim修饰符</h1>
    <input v-model.trim="text" type="text" />{{ text }}
    <hr />
    <h1>watch监听</h1>
    <div id="demoDiv">
      <h1>watch</h1>
      <input type="text" v-model.lazy="text" />
      <h1>{{ text }}</h1>
    </div>
  </div>
</template>

<script>
import zi from "./ZiViews";
import zione from "./ZiOneViews";
export default {
  components: {
    zi,
    zione,
  },
  data() {
    return {
      arr: "我是父页面的data数据",
      num: "0",
      newnum: "1",
      text: "nihao",
    };
  },
  methods: {
    fun(val) {
      console.log(val);
    },
    fun1() {
      console.log(typeof this.newnum);
    },
    fun2() {
      console.log(this.$refs.com);
    },
  },
  watch: {
    text: {
      handler(newval, oldval) {
        console.log(newval + "---" + oldval);
      },
      immediate: true, //初始化执行
      deep: true, //深度监听，性能消耗较大，使用字符串监听优化
    },
  },
};
</script>

<style>
</style>